<style>
    :root {
        --primary: #165DFF;
        --primary-light: #E8F3FF;
        --secondary: #36BFFA;
        --dark: #1D2939;
        --light: #F9FAFB;
        --gray: #667085;
        --border: #E5E7EB;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: var(--light);
        color: var(--dark);
        line-height: 1.8;
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .container {
        max-width: 900px;
    }


    .terms-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 2.5rem;
        margin-bottom: 2rem;
    }

    .terms-card .page-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--dark);
        text-align: center;
    }

    .terms-card .terms-meta {
        text-align: center;
        color: var(--gray);
        font-size: 0.9rem;
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
    }

    .terms-card .terms-section {
        margin-bottom: 2.5rem;
    }

    .terms-card .section-heading {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--primary);
    }

    .terms-card .section-subheading {
        font-size: 1.1rem;
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .terms-card .terms-text {
        margin-bottom: 1rem;
        color: #4B5563;
    }

    .terms-card .terms-list {
        padding-left: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .terms-card .terms-list li {
        margin-bottom: 0.75rem;
        color: #4B5563;
    }

    .terms-card .highlight {
        background-color: var(--primary-light);
        padding: 2px 4px;
        border-radius: 4px;
        font-weight: 500;
    }

    .agreement-section {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .agreement-section .agreement-check {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
    }

    .agreement-section .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .agreement-section .action-buttons {
        display: flex;
        gap: 1rem;
    }

    /**** 系统基本样式 ****/
    .btn {
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .btn-primary:hover {
        background-color: #0E42D2;
        border-color: #0E42D2;
    }

    .btn-secondary {
        background-color: white;
        color: var(--dark);
        border: 1px solid var(--border);
    }

    .btn-secondary:hover {
        background-color: var(--light);
    }

    /*** 栏目 ***/
    .terms-navigation {
        position: sticky;
        top: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: var(--shadow);
        padding: 1.5rem;
        height: fit-content;
    }

    .terms-navigation .nav-title {
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .terms-navigation .nav-list {
        list-style: none;
        padding: 0;
    }

    .terms-navigation .nav-item {
        margin-bottom: 0.5rem;
    }

    .terms-navigation .nav-link {
        color: var(--gray);
        text-decoration: none;
        display: block;
        padding: 5px 8px;
        border-radius: 4px;
        transition: all 0.2s;
        font-size: 0.9rem;
    }

    .terms-navigation .nav-link:hover, .terms-navigation .nav-link.active {
        color: var(--primary);
        background-color: var(--primary-light);
    }

    @media (max-width: 768px) {
        .terms-card {
            padding: 1.5rem;
        }

        .terms-card .page-title {
            font-size: 1.75rem;
        }

        .terms-navigation {
            display: none;
        }

        .agreement-section .action-buttons {
            flex-direction: column;
            width: 100%;
        }

        .agreement-section .btn {
            width: 100%;
        }
    }
</style>

<div class="container">
    <div class="row">
        <!-- 条款导航 -->
        <div class="col-md-3 d-none d-md-block">
            <div class="terms-navigation">
                <div class="nav-title">目录</div>
                <ul class="nav-list">
                    <li class="nav-item"><a href="#intro" class="nav-link active">协议介绍</a></li>
                    <li class="nav-item"><a href="#service" class="nav-link">服务内容</a></li>
                    <li class="nav-item"><a href="#account" class="nav-link">账号注册与使用</a></li>
                    <li class="nav-item"><a href="#content" class="nav-link">内容规范</a></li>
                    <li class="nav-item"><a href="#privacy" class="nav-link">隐私保护</a></li>
                    <li class="nav-item"><a href="#intellectual" class="nav-link">知识产权</a></li>
                    <li class="nav-item"><a href="#termination" class="nav-link">服务终止</a></li>
                    <li class="nav-item"><a href="#disclaimer" class="nav-link">免责声明</a></li>
                    <li class="nav-item"><a href="#changes" class="nav-link">协议变更</a></li>
                    <li class="nav-item"><a href="#miscellaneous" class="nav-link">其他条款</a></li>
                </ul>
            </div>
        </div>

        <!-- 条款内容 -->
        <div class="col-md-9">
            <div class="terms-card">
                <h1 class="page-title">社交平台服务协议</h1>
                <div class="terms-meta">
                    生效日期：2023年10月1日 | 版本号：V2.3
                </div>

                <!-- 协议介绍 -->
                <section id="intro" class="terms-section">
                    <h2 class="section-heading">1. 协议介绍</h2>
                    <p class="terms-text">
                        欢迎使用我们的社交平台服务（以下简称"本服务"）。本服务由[公司名称]（以下简称"我们"）提供。在使用本服务前，请您仔细阅读以下全部条款。您通过注册、登录、使用等方式使用本服务，即表示您已阅读并同意本服务协议的全部内容。
                    </p>
                    <p class="terms-text">
                        本协议旨在规范您与我们之间关于本服务的权利义务关系。如果您不同意本协议的任何内容，请您立即停止使用本服务。
                    </p>
                </section>

                <!-- 服务内容 -->
                <section id="service" class="terms-section">
                    <h2 class="section-heading">2. 服务内容</h2>
                    <p class="terms-text">
                        本服务包括但不限于以下内容：
                    </p>
                    <ul class="terms-list">
                        <li>提供社交互动平台，包括但不限于个人主页、动态发布、评论、私信等功能</li>
                        <li>提供兴趣社群、话题讨论等功能</li>
                        <li>提供内容推荐、搜索等服务</li>
                        <li>提供与第三方服务相关的链接或入口</li>
                    </ul>
                    <p class="terms-text">
                        我们保留随时变更、中断或终止部分或全部服务的权利，且有权对服务内容进行调整和更新，无需事先通知用户，但重大变更将通过平台公告等方式告知用户。
                    </p>
                </section>

                <!-- 账号注册与使用 -->
                <section id="account" class="terms-section">
                    <h2 class="section-heading">3. 账号注册与使用</h2>

                    <h3 class="section-subheading">3.1 注册条件</h3>
                    <p class="terms-text">
                        您声明并保证：在注册账号时，您已年满16周岁；若您未满16周岁，应在法定监护人的陪同下阅读本协议，并在获得法定监护人的同意后注册和使用本服务。
                    </p>

                    <h3 class="section-subheading">3.2 账号信息</h3>
                    <p class="terms-text">
                        您在注册时应提供真实、准确、完整的信息，并及时更新您的个人信息，以确保其真实、准确、完整。如因您提供的信息不真实、不准确或不完整，导致我们无法为您提供服务或产生其他损失的，由您自行承担责任。
                    </p>

                    <h3 class="section-subheading">3.3 账号安全</h3>
                    <p class="terms-text">
                        您应对您的账号和密码的安全性负责，不得向任何第三方泄露您的账号信息。如您发现账号异常使用或存在安全漏洞，请立即通知我们。因您的原因导致账号被盗用、丢失等产生的一切损失，由您自行承担。
                    </p>

                    <h3 class="section-subheading">3.4 账号使用规范</h3>
                    <p class="terms-text">
                        您不得将账号用于任何违法违规活动，不得将账号出租、出借、转让或售卖给他人使用。如违反上述规定，我们有权对您的账号采取限制使用、冻结或封禁等措施。
                    </p>
                </section>

                <!-- 内容规范 -->
                <section id="content" class="terms-section">
                    <h2 class="section-heading">4. 内容规范</h2>

                    <h3 class="section-subheading">4.1 内容定义</h3>
                    <p class="terms-text">
                        本协议所称"内容"是指您在使用本服务过程中上传、发布、传播的任何内容，包括但不限于文字、图片、音频、视频、链接等。
                    </p>

                    <h3 class="section-subheading">4.2 内容合规</h3>
                    <p class="terms-text">
                        您承诺在上传、发布、传播内容时，遵守国家法律法规及相关规定，不得制作、复制、发布、传播以下内容：
                    </p>
                    <ul class="terms-list">
                        <li>违反宪法确定的基本原则的；</li>
                        <li>危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一的；</li>
                        <li>损害国家荣誉和利益的；</li>
                        <li>煽动民族仇恨、民族歧视、破坏民族团结的；</li>
                        <li>破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
                        <li>散布谣言，扰乱社会秩序，破坏社会稳定的；</li>
                        <li>散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；</li>
                        <li>侮辱或者诽谤他人，侵害他人合法权益的；</li>
                        <li>含有法律、行政法规禁止的其他内容的。</li>
                    </ul>

                    <h3 class="section-subheading">4.3 内容管理</h3>
                    <p class="terms-text">
                        我们有权对您发布的内容进行审核和管理，对于违反本协议或相关规定的内容，我们有权采取删除、屏蔽、限制传播等措施，情节严重的，我们有权对您的账号采取限制使用、冻结或封禁等措施。
                    </p>
                </section>

                <!-- 隐私保护 -->
                <section id="privacy" class="terms-section">
                    <h2 class="section-heading">5. 隐私保护</h2>
                    <p class="terms-text">
                        我们重视您的隐私保护，关于您的个人信息的收集、使用、存储、保护等事宜，详见我们的《隐私政策》。您同意我们按照《隐私政策》的规定处理您的个人信息。
                    </p>
                    <p class="terms-text">
                        您应知悉并同意，为了提供本服务，我们可能需要收集您的部分个人信息，包括但不限于您的姓名、手机号码、电子邮箱、地理位置信息等。我们将采取合理的安全措施保护您的个人信息，防止其被泄露、滥用或篡改。
                    </p>
                </section>

                <!-- 知识产权 -->
                <section id="intellectual" class="terms-section">
                    <h2 class="section-heading">6. 知识产权</h2>

                    <h3 class="section-subheading">6.1 平台知识产权</h3>
                    <p class="terms-text">
                        本服务及本服务所包含的所有产品、技术、软件、程序、数据及其他信息（包括但不限于文字、图像、图片、照片、音频、视频、图表、色彩、版面设计、电子文档）的所有权利（包括但不限于版权、商标权、专利权、商业秘密及其他所有相关权利）均归我们或我们的关联公司所有。
                    </p>

                    <h3 class="section-subheading">6.2 用户内容知识产权</h3>
                    <p class="terms-text">
                        您在本服务中上传、发布、传播的内容的知识产权归您或原始权利人所有。您同意授予我们一项全球范围内、免费、非独家、可再许可的权利，允许我们使用、复制、修改、改编、出版、翻译、据以创作衍生作品、传播、表演和展示该等内容，以及将该等内容编入当前已知的或以后开发的其他任何形式的作品、媒体或技术中。
                    </p>

                    <h3 class="section-subheading">6.3 知识产权保护</h3>
                    <p class="terms-text">
                        我们尊重知识产权，反对并打击侵犯知识产权的行为。任何组织或个人认为本服务中的内容可能侵犯其合法权益，请及时向我们提出书面权利通知，并提供身份证明、权属证明、具体链接（URL）及详细侵权情况证明。我们将在收到上述法律文件后，依法尽快处理。
                    </p>
                </section>

                <!-- 服务终止 -->
                <section id="termination" class="terms-section">
                    <h2 class="section-heading">7. 服务终止</h2>

                    <h3 class="section-subheading">7.1 用户主动终止</h3>
                    <p class="terms-text">
                        您可以随时申请注销您的账号，账号注销后，我们将停止为您提供服务。账号注销后，您的部分或全部数据可能无法恢复，请您谨慎操作。
                    </p>

                    <h3 class="section-subheading">7.2 平台终止服务</h3>
                    <p class="terms-text">
                        如您违反本协议的任何条款，我们有权随时终止向您提供部分或全部服务，且无需事先通知您。如我们决定终止向您提供服务，我们将尽可能通过邮件、站内信等方式通知您，并说明理由。
                    </p>

                    <h3 class="section-subheading">7.3 服务终止后的效力</h3>
                    <p class="terms-text">
                        服务终止后，本协议中关于知识产权、免责声明、法律适用等条款仍然有效。
                    </p>
                </section>

                <!-- 免责声明 -->
                <section id="disclaimer" class="terms-section">
                    <h2 class="section-heading">8. 免责声明</h2>
                    <p class="terms-text">
                        您理解并同意，本服务是基于互联网技术提供的，可能会受到网络环境、设备性能、第三方服务等多种因素的影响，我们不保证本服务的绝对稳定性和连续性。对于因不可抗力、网络故障、第三方服务问题等原因导致的服务中断或无法正常使用，我们不承担责任，但我们将尽力减少因此给您带来的损失。
                    </p>
                    <p class="terms-text">
                        您理解并同意，我们不对您在本服务中发布的内容的真实性、准确性、合法性负责，不对用户之间因使用本服务而产生的任何纠纷负责。您应自行判断并承担因使用本服务而产生的风险。
                    </p>
                    <p class="terms-text">
                        本服务可能包含链接到第三方网站或服务的链接，这些链接仅为方便您使用而提供，我们不对这些第三方网站或服务的内容、隐私政策、服务条款等负责，您访问这些链接将遵守第三方的相关规定。
                    </p>
                </section>

                <!-- 协议变更 -->
                <section id="changes" class="terms-section">
                    <h2 class="section-heading">9. 协议变更</h2>
                    <p class="terms-text">
                        我们有权根据国家法律法规的变化、服务内容的调整等因素，对本协议进行修改和更新。修改后的协议将在平台公告后生效。如您继续使用本服务，即表示您已阅读并同意修改后的协议内容。如您不同意修改后的协议，您应立即停止使用本服务。
                    </p>
                    <p class="terms-text">
                        对于重大变更，我们将通过平台公告、站内信等方式提前通知您，给予您合理的考虑期限。
                    </p>
                </section>

                <!-- 其他条款 -->
                <section id="miscellaneous" class="terms-section">
                    <h2 class="section-heading">10. 其他条款</h2>

                    <h3 class="section-subheading">10.1 法律适用</h3>
                    <p class="terms-text">
                        本协议的订立、效力、解释、履行及争议解决均适用中华人民共和国法律（不包括香港、澳门特别行政区和台湾地区的法律）。
                    </p>

                    <h3 class="section-subheading">10.2 争议解决</h3>
                    <p class="terms-text">
                        因本协议引起的或与本协议有关的任何争议，双方应首先通过友好协商解决；协商不成的，任何一方均有权向我们所在地有管辖权的人民法院提起诉讼。
                    </p>

                    <h3 class="section-subheading">10.3 联系我们</h3>
                    <p class="terms-text">
                        如您对本协议有任何疑问，或需要举报违规内容，请通过以下方式联系我们：
                    </p>
                    <ul class="terms-list">
                        <li>客服邮箱：support@socialplatform.com</li>
                        <li>客服电话：400-123-4567（工作日 9:00-18:00）</li>
                        <li>平台内反馈：我的 > 设置 > 意见反馈</li>
                    </ul>

                    <h3 class="section-subheading">10.4 完整协议</h3>
                    <p class="terms-text">
                        本协议构成您与我们之间关于本服务的完整协议，取代之前的任何口头或书面协议。本协议的任何条款被认定为无效或不可执行，不影响其他条款的效力。
                    </p>
                </section>
            </div>

            <!-- 协议同意区域 -->
            <div class="agreement-section">
                <div class="agreement-check">
                    <input class="form-check-input" type="checkbox" id="agreeTerms">
                    <label class="form-check-label" for="agreeTerms">
                        我已阅读并同意上述服务协议
                    </label>
                </div>

                <div class="action-buttons">
                    <button type="button" class="btn btn-secondary" id="cancelBtn">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmBtn" disabled>确认同意</button>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
	// 导航链接点击事件
	document.querySelectorAll('.nav-link').forEach(link => {
		link.addEventListener('click', function (e) {
			e.preventDefault();

			// 移除所有激活状态
			document.querySelectorAll('.nav-link').forEach(item => {
				item.classList.remove('active');
			});

			// 添加当前激活状态
			this.classList.add('active');

			// 滚动到对应部分
			const targetId = this.getAttribute('href');
			const targetElement = document.querySelector(targetId);

			if (targetElement) {
				window.scrollTo({
					top: targetElement.offsetTop - 20,
					behavior: 'smooth'
				});
			}
		});
	});

	// 监听滚动，更新导航激活状态
	window.addEventListener('scroll', function () {
		const sections = document.querySelectorAll('.terms-section');
		const navLinks = document.querySelectorAll('.nav-link');

		let currentSectionId = '';

		sections.forEach(section => {
			const sectionTop = section.offsetTop;
			const sectionHeight = section.clientHeight;

			if (window.scrollY >= sectionTop - 100) {
				currentSectionId = section.getAttribute('id');
			}
		});

		navLinks.forEach(link => {
			link.classList.remove('active');
			if (link.getAttribute('href') === `#${currentSectionId}`) {
				link.classList.add('active');
			}
		});
	});

	// 协议同意 checkbox 事件
	const agreeCheckbox = document.getElementById('agreeTerms');
	const confirmBtn = document.getElementById('confirmBtn');

	agreeCheckbox.addEventListener('change', function () {
		confirmBtn.disabled = !this.checked;
	});

	// 确认按钮事件
	confirmBtn.addEventListener('click', function () {
		// 在实际应用中，这里会记录用户的同意状态
		alert('您已同意服务协议，将为您继续提供服务。');
		window.history.back();
	});

	// 取消按钮事件
	document.getElementById('cancelBtn').addEventListener('click', function () {
		window.history.back();
	});

	// 平滑滚动到顶部按钮（可选）
	const scrollToTop = () => {
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		});
	};
</script>

    
